<!--
 * @Author: ChunLai
 * @Date: 2023-08-07 17:00:12
 * @LastEditTime: 2025-05-27 09:33:45
 * @Description: 接口文档阅读弹窗
 * @FilePath: \02.bldinsure\src\views\sign\components\ApiFileDisplay.vue
-->
<template>
  <van-popup
    v-model="show"
    position="bottom"
    round
    :close-on-click-overlay="false"
    :style="{ height: '80%' }"
    sticky
  >
    <div class="pop_read_mode">
      <!-- <div class="file_tt">
        {{ fileObj.title }}
      </div> -->
      <div
        class="file_cont"
        :class="fileObj.title == '人身保险投保书' ? 'scroll_x' : ''"
      >
        <div
          v-html="fileObj.htmlContent"
          v-if="fileObj.showType === 'html'"
        ></div>
        <div id="pdfReadBox" v-else-if="fileObj.showType === 'pdf'"></div>
      </div>
      <div class="file_btn_box">
        <div class="file_btn" @click="hasReadFile" v-if="showSureBtn">
          我已阅读并知悉
        </div>
        <div class="file_btn err_file" @click="closePop" v-else>
          文件正在生成中,请稍候重试
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  name: "ApiFileDisplay",
  data() {
    return {
      show: false,
      apiH5Pdf: null,
      fileObj: {},
      showSureBtn: true,
    };
  },
  components: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    initModule(item) {
      this.show = true;
      this.showSureBtn = true;
      this.fileObj = item;
      if (item.showType === "pdf") {
        let that = this;
        if (window.Pdfh5) {
          return that.initPdf();
        }
        pdfJs(function (res) {
          that.initPdf();
        });
      }
    },
    hasReadFile() {
      this.fileObj = {};
      this.apiH5Pdf = null;
      this.$emit("handleClick");
      this.show = false;
    },
    closePop() {
      this.fileObj = {};
      this.apiH5Pdf = null;
      this.show = false;
    },
    initPdf() {
      this.$nextTick(() => {
        this.apiH5Pdf = new Pdfh5("#pdfReadBox", {
          pdfurl: this.fileObj.pdfPath,
        });
        let that = this;
        // 监听完成事件
        this.apiH5Pdf.on("complete", function (status, msg, time) {
          // console.log(status, msg);
          if (status == "error") {
            that.showSureBtn = false;
          }
          that.pdfPageNum = this.totalNum;
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.pop_read_mode {
  height: 100%;
  padding: 0 12px;

  .file_tt {
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .file_cont {
    height: calc(100% - 60px);
    padding: 10px 0;
    overflow: hidden;
    overflow-y: scroll;
    &.scroll_x {
      width: 700px;
      overflow-x: scroll;
    }
  }
}
.file_btn_box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 -0.08rem 0.133333rem 0 rgba(0, 0, 0, 0.1);
  .file_btn {
    width: 70%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    border-radius: 40px;
    background: linear-gradient(90deg, #ff442b 0%, #cb1800 100%);
    &.err_file {
      font-size: 14px;
      background: linear-gradient(180deg, #ff9e3a, #ff5903);
    }
  }
}
.file_cont {
  /deep/input {
    appearance: checkbox !important;
  }
}
</style>
